<template>
  <main-card
    :title="`${detailData?.name || ''}`"
    :crumbs="crumbs"
    :loading="getDictionLoading"
    :screen-style-obj="computedScreenStyleObj"
    :main-body-style-obj="{ paddingBottom: 0 }"
  >
    <template #tool-btn>
      <div class="flex items-center gap-x-8" style="flex: 1">
        <a-button type="default" class="icon-with-btn" @click="handleDownDataSet">
          <i class="iconfont icon-download-2-line"></i>
          下载数据集
        </a-button>
        <template v-if="showButton">
          <a-button
            v-if="detailData?.isParticipated"
            type="default"
            :disabled="detailData?.status !== '进行中'"
            @click="handleParticipation"
          >
            再次参与
          </a-button>
          <a-button v-else type="primary" :disabled="detailData?.status !== '进行中'" @click="handleParticipation">立即参与</a-button>
        </template>
      </div>
    </template>

    <div class="tabs"><switch-tabs :tabs="tabs" :selected-tab="selectedTab" @switchTab="switchTab" /></div>

    <div class="detail-content">
      <div v-if="showComponent" class="component">
        <component :is="compMap[selectedTab]" :prop-value="detailData" />
      </div>
      <!-- <a-affix :offset-top="120"> -->
      <detail-info :prop-value="detailData" />
      <!-- </a-affix> -->
    </div>
  </main-card>

  <participation-modal ref="participationModalRef" @success="participationSuccess" />
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { computed, ref } from 'vue'
  import { nextTick } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute } from 'vue-router'

  import MainCard from '@/components/MainCard/index.vue'
  import SwitchTabs from '@/components/SwitchTabs/index.vue'
  import { hitContestApi } from '@/services/api'
  import { downloadFile } from '@/utils'

  import { DetailType } from '../types'
  import DetailInfo from './components/DetailInfo.vue'
  import MyGrade from './components/MyGrade.vue'
  import ParticipationModal from './components/ParticipationModal.vue'
  import RankingList from './components/RankingList.vue'
  import RuleDeclare from './components/RuleDeclare.vue'

  const compMap: { [key in string]: any } = {
    ruleDeclare: RuleDeclare,
    rankingList: RankingList,
    myGrade: MyGrade
  }
  const route = useRoute()
  const showComponent = ref(true)
  const { id } = route.params as { id: string }
  const crumbs = computed(() => {
    return [{ path: '/hit-contest/list', name: `打榜竞技` }, { name: `${detailData.value.name || ''}` }]
  })
  const computedScreenStyleObj = computed(() => {
    return {
      padding: '0 32px 0 32px'
    }
  })

  const showButton = computed(() => {
    return detailData.value.status === '进行中'
  })

  const tabs = [
    {
      name: '打榜说明',
      key: 'ruleDeclare'
    },
    {
      name: '排行榜',
      key: 'rankingList'
    },
    {
      name: '我的成绩',
      key: 'myGrade'
    }
  ]
  let selectedTab = ref<string>('ruleDeclare') // 默认选中第一个 tab
  const switchTab = (key: string) => {
    selectedTab.value = key
  }

  const handleDownDataSet = () => {
    message.success('开始下载')
    detailData.value?.trainDataUrl && downloadFile(detailData.value?.trainDataUrl, detailData.value?.trainDataUrl)
  }

  /* 立即参与 */
  const participationModalRef = ref<InstanceType<typeof ParticipationModal>>()
  const handleParticipation = () => {
    participationModalRef.value?.open({ id })
  }
  const participationSuccess = async () => {
    await getDetail(id)
    showComponent.value = false
    nextTick(() => {
      showComponent.value = true
    })
  }

  /* 详情 */
  const detailData = ref<DetailType>({})
  const { loading: getDictionLoading, runAsync: getDetail } = useRequest<ResponseData<DetailType>>(
    (id: string) => hitContestApi.detail({ id: id }),
    {
      onSuccess: ({ data }) => {
        Object.assign(detailData.value, data)
      }
    }
  )
  getDetail(id)
</script>

<style lang="less" scoped>
  .tabs {
    padding: 12px 0 16px;
  }

  .detail-content {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    gap: 0 24px;

    > .component {
      width: 1024px;
      height: 100%;
      min-height: 650px;
      flex-shrink: 0;
    }
  }

  .added {
    min-width: 0;
    font-size: 14px;
    text-align: end;
    color: #649af0;
    font-weight: 400;
    flex-shrink: 0;
    cursor: pointer;
  }
</style>
